<!--
 * @version: 
 * @Author: yu
 * @Date: 2023-06-26 11:02:11
 * @LastEditors: Andy
 * @LastEditTime: 2023-06-29 21:16:06
-->
<template>
    <div>
        <div class="main">
            <div class="box">
                <h1>{{ $route.name }}</h1>
                <el-form :model="user" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名：" prop="username">
                        <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：" prop="password">
                        <el-input v-model="user.password" placeholder="请输入密码" show-password></el-input>
                    </el-form-item>
                </el-form>
                <el-button @click="_login" class="box1" type="primary">登录</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { successAlert, errorAlert } from '@/utils/alert'
import { userLogin } from '@/request/api'
import { mapActions } from 'vuex'
export default {
    data() {
        return {
            user: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        ...mapActions({
            requestUser: 'userActions'
        }),
        //登录页
        _login() {
            this.$refs.form.validate((val) => {
                // console.log(val);
                if (!val) {
                    return
                }
                // console.log(this.user);
                userLogin(this.user).then(res => {
                    // console.log(res);
                    if (res.code === 200) {
                        //消息提示
                        successAlert('登录成功')
                        //存储数据
                        this.requestUser(res.list)
                        //路由跳转
                        this.$router.push('/index')
                    } else {
                        //消息提示
                        errorAlert(res.msg)
                    }
                })

            })
        }
    },
    mounted() {
        document.title = this.$route.meta.title
    },
    watch: {},
    computed: {},
    filters: {},
    components: {}
}
</script>
<style scoped>
.box1 {
    display: block;
    width: 280px;
    margin-left: 100px;
}

.main {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to left, #323c5e, #503648);
    position: absolute;
    top: 0;
    left: 0;
}

.box {
    width: 380px;
    padding: 25px;
    line-height: 67px;
    /* margin: 10px; */
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 3%;
}

.box h1 {
    text-align: center;
}
</style>